<template>
	<!-- 搜索设计师 -->
	<view>
		
		<searces :slist="tagLists"  :addr='address' :flg="flage" :flg1='flage1' :flg2='flage2' :flg3='flage3'></searces>
		<!-- 没有结果显示 -->
		<view v-if="dataList.length==0">
			<u-empty text="没有搜索结果" mode="search" ></u-empty>
		</view>
		
		<!-- //列表区域 -->
		<view class="lists" v-for="(item,index) in dataList" :key='index' @click="godetail">
			<view class="list-con">
				<view class="list-con-left">
					<image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3266084400,2103938663&fm=26&gp=0.jpg" mode=""></image>
					<view class="description">
						<text>{{item.description}}</text>
					</view>
				</view>
				<view class="list-con-cen">
					<view class="tony"> 
						<text>{{item.designerName}}  </text> 	
						<text style="font-size: 22rpx;font-family: PingFang;font-weight: 500;color:#696969;margin-left: 10rpx;">
							{{item.designerLevel}}
						</text>
						<text class="icon iconfont" v-for="(item1,index1) in item.starRating" :key='index1'>&#xe621;</text>
					</view>
					<view class="con-tu">
						<text class="con-si">{{item.designerScore}} 很棒</text> 
						<text>{{item.appointmentDiscount}}条点评</text> 
						<text>{{item.appointmentNumber}}次服务</text>
					</view>
					<view class="con-sr">
						<text>距离我{{discountFilter(item.longitudeLatitude)}}km-位于：{{item.locationName}}</text>
					</view>
					<view class="con-fu">
						<text>职位：{{item.designerPosition}}</text>
						<text class="cong">从业：{{item.workingYears}}</text>
					</view>
					<view class="con-fan">
						<text>擅长：{{item.beGoodAt}}</text>
					</view>
					<view class="con-sks">
						<text>预约制度</text>
						<text>上门服务</text>
						<text>染发设计</text>
					</view>
					
				</view>
				<view class="list-con-right">
					<view class="right-price">						
						<text>￥</text>
						{{item.storeAboutPrice}}
					</view>
					<view class="right-xi">{{item.cmsServiceAll.serviceSubdivide}}</view>
					<view class="right-yue">{{item.discount}}</view>
					<view class="right-zai">在线预订</view>
				</view>
			</view>
				
			
		</view>
	
	</view>
</template>

<script>
import searces from '../search_public/search.vue';
import {indexSearch,gradeSearch,getSales,getLowestPrice,getHighestPrice,getNewest ,getPraise,getLocationArea,searchSubdivision,screen}from '@/api/index.js'
import {checkedId} from '@/utils/xuehua.js'
export default {
	data() {
		return {
			lists:[
		
			],
			tagLists:['中级','高级','导师','名师'],
			address:'213',
			page:1,
			obj:{},
			dataList:[],//搜索结果 
			Longitude:'',//当前经度
			Latitude:'',//当前维度
			xingji:'',
			flage:true,
			flage1:true,
			flage2:false,
			flage3:false
		}
	},
	components: {
		searces
	},
	methods:{
		getList(data){
			console.log('父亲的方法',data)
		},
		//从首页过来的搜索
		getindexChares(datas){
		
			indexSearch(datas).then(res=>{
				console.log('qqqqqqqqqqqqqqqqqqqqq',res[1])
				let result = checkedId(res[1].data)
				console.log(result,'xxxxxxxxxxxxxxxxxxxx')
				if(result.data.length>0){
					let arr = []
					this.dataList = result.data
					
					// this.dataList = this.dataList.concat(arr)
				}else{
					uni.showToast({
						icon:'none',
						title:'没有更多数据了'
					})
					uni.stopPullDownRefresh();
					return
				}
				
				
				console.log(this.dataList,'+++++++++++=============')
			}).catch(err=>{
				console.log(err)
			})
	
		},
		//计算距离
		discountFilter(xxx){
			let that = this
			that.getLonLa()
			var La1 = that.Longitude * Math.PI / 180.0;
			var La2 = xxx.split(',')[0]* Math.PI / 180.0;
			var La3 = La1 - La2;
			var Lb3 = that.Latitude * Math.PI / 180.0 - xxx.split(',')[1] * Math.PI / 180.0;
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
			s = s * 6378.137;//地球半径
			s = Math.round(s * 10000) / 10000;
			console.log("计算结果",s);
			return (s/1000).toFixed(2);
			
		},
		// 获取当前的经纬度
		getLonLa(){
			let that = this 
			uni.getLocation({
				type: 'wgs84',
				success: (res) => {
					that.Longitude = res.longitude
					that.Latitude = res.latitude
					 
				}
			})
		},
		//获取内容
		getCont(){
			let that = this
			uni.$on('cont',res=>{
				if(res){
					console.info(res,'xxx')
					let data = res
					data.city = that.address
					data.page = that.page
					// let data = {
					// 	city:that.address,
					// 	occupationName:res.seaech_key,
					// 	starRating:that.xingji,
					// 	level:res.tag,
					// 	page:that.page
					// }
					console.log(data)
					gradeSearch(data).then(res=>{
						console.log('我是搜索的结果',res)
							let result = checkedId(res[1].data)
						that.dataList = result.data
					})
				}
				
			})
		},
		//获取销量最多
		getSale(){
			let that = this
			uni.$on('xlzg',res=>{
				let data = {
					city:that.address,
					occupationName:res.seaech_key,
					starRating:that.xingji,
			
					page:that.page
				}
				getSales(data).then(ress=>{
					console.log(ress,'xxhh')
						let result = checkedId(ress[1].data)
					that.dataList = result.data
				})
			})
		},
		//获取价格最低
		getLowrPrice(){
			let that = this
			uni.$on('jgzd',res=>{
				let data = {
					city:that.address,
					occupationName:res.seaech_key,
					starRating:that.xingji,
							
					page:that.page
				}
				getLowestPrice(data).then(ress=>{
					console.log(ress,'价格最低')
				let result = checkedId(ress[1].data)
				that.dataList = result.data
				})
			})
		},
		//获取价格最高
		getMaxPrice(){
			let that = this
			
			uni.$on('jgzg',res=>{
				let data = {
					city:that.address,
					occupationName:res.seaech_key,
					starRating:that.xingji,
							
					page:that.page
				}
				getHighestPrice(data).then(ress=>{
					console.log(ress,'价格最高')
					let result = checkedId(ress[1].data)
					that.dataList = result.data
				})
			})
		},
		//后去最新上架
		getNew(){
			let that = this
			
			uni.$on('zxsj',res=>{
				let data = {
					city:that.address,
					occupationName:res.seaech_key,
					starRating:that.xingji,
							
					page:that.page
				}
				getNewest(data).then(ress=>{
					console.log(ress,'最新上架')
					let result = checkedId(ress[1].data)
					that.dataList = result.data
				})
			})
		},
		//获取好评优先
		getPraise(){
			let that = this			
			uni.$on('hpyx',res=>{
				let data = {
					city:that.address,
					occupationName:res.seaech_key,
					starRating:that.xingji,						
					page:that.page
				}
				getPraise(data).then(ress=>{
					console.log(ress,'好评优先')
					let result = checkedId(ress[1].data)
					that.dataList = result.data
				})
			})
		},
		//获取智能排序
		getZi(){
			uni.$on('znpx',res=>{
				this.getindexChares(this.obj)
			})
			
		},
		//获取位置区域
		getDirct(){
			uni.$on('wzyb',res=>{
				console.log(res)
				let data = res
				data.city = this.address
				data.page = this.page
				data.starRating = this.xingji 
				getLocationArea(data).then(ress=>{
					let result = checkedId(ress[1].data)
					this.dataList = result.data
					
				})
			})
		},
		//获取美发选中后的数据
		
		getMeiList(){
			uni.$on('mflist',res=>{
				console.log(res)
				let data = res
				data.page = this.page
				data.city = this.address
				searchSubdivision(data).then(ress=>{
					let result = checkedId(ress[1].data)
					this.dataList = result.data
				})
			})
		},
		//筛选完成
		getFilter(){
			uni.$on('wan',res=>{
				let data = res
				data.city = this.address
				data.page = this.page
				screen(data).then(ress=>{
					let result = checkedId(ress[1].data)
					this.dataList = result.data
				})
			})
		},
		//获取搜索
		getSearch(){
			uni.$on('search',res=>{
				let data =res
				data.city =this.address
				data.page = this.page
				indexSearch(data).then(ress=>{
					let result = checkedId(ress[1].data)
					this.dataList = result.data
				})
			})
		},
		//去详情也
		godetail(){
			uni.navigateTo({
				url:'/pagesA/serve_detail/serve_detail'
			})
		}
		
	},
	async onLoad(option) {
		console.log("xxx",option)
		let that = this
		
		function aa(){
			that.address  = option.city
			that.obj = option
			that.xingji = option.starRating
			console.log(option,'hhh')
		}
		await aa()
		await that.getCont()
		await that.getSale()
		await that.getLowrPrice()
		await that.getMaxPrice()
		await that.getNew()
		await that.getPraise()
		await that.getZi()
		await that.getDirct()
		await that.getMeiList()
		await that.getFilter()
		await that.getSearch()
		console.log('地址',this.address )
	
		
	
			option.page = that.page
			
			that.getindexChares(that.obj)	
		
		console.log(that.obj,'+++++++++++++++ooo')
	},
	onUnload(){
		uni.$off('zxsj')
		uni.$off('mflist')
		uni.$off('znpx')
		uni.$off('hpyx')
		uni.$off('jgzg')
		uni.$off('xlzg')
		uni.$off('cont')
		uni.$off('jgzd')
		uni.$off('wan')
		uni.$off('search')
	},
	async onPullDownRefresh (){	
				  console.log("我刷新了吗")
				  this.obj.page = 1
				  this.dataList=null
				  this.getindexChares(this.obj)
			      uni.stopPullDownRefresh()//这里是防止下拉的回不去，回去效果卡顿	
		},
		async onReachBottom(){
			uni.showLoading({
			    title: '拼命加载中'
			});
			
			console.log("我触底了哦")
			this.obj.page++
			// this.getCont()
			console.log(this.obj)
		
			this.getindexChares(this.obj)

				
		
			},
			
		filters:{
			
		}
};
</script>

<style scoped lang="less">
	.lists{
			padding: 23rpx 26rpx;
			border-bottom: 1rpx solid #E0E0E0;
			
			
			.list-con{
				width: 100%;
				height: 100%;
				display: flex;				
				
				
				.list-con-left{
					width:28%;
					position: relative;		
					image{
						width: 100%;
						height: 100%;
						display: block;
					}
					.description{
						width: 100%;
						height: 26rpx;
						position: absolute;
						bottom: 0;						
						background: #000000;
						opacity: 0.5;
						border-radius: 0px 0px 4rpx 4rpx;
						text-align: center;
						line-height:16rpx ;
						text{							
							font-size: 16rpx;
							font-family: STHeitiSC;
							font-weight: 300;
							color: #FFFFFF;
							// opacity: 0.5;
						}
					}
				}
				.list-con-cen{
					margin-left: 20rpx;
					width: 55%;
					.tony{
						
					}
					.iconfont{
						color: #F2CB51;
						font-size: 22rpx;
					}
					.con-tu{	
						line-height:40rpx ;
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #363636;
						
						text{
							margin-left: 10rpx;
						}					
						.con-si{							
							font-size: 22rpx;
							font-family: PingFang;
							font-weight: 500;
							color: #000000;
							line-height: 30rpx;
						}
					}
					.con-sr{						
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #363636;
						
					}
					.con-fu{						
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #5A5A5A;
						margin-top: 20rpx;
						
						.cong{
							margin-left: 20rpx;
						}
					}
					.con-fan{						
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #5D5D5D;
						margin-top:5rpx;
					}
					.con-sks{						
						font-size: 16rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #1EBBBD;
						margin-top: 15rpx;
						
						text{
							display: inline-block;
							padding: 6rpx 7rpx;
							border:1rpx solid #1EBBBD;
							margin-right: 10rpx;
						}
					}
				}
				.list-con-right{
					padding:96rpx 0 0 0;
					text-align: right;
					width: 14%;
					
					.right-price{						
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
						
						text{
							font-size: 20rpx;
						}
					}
					.right-xi{						
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #767676;
					}
					.right-yue{
						text-align: right;
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #00C6C2;
					}
					.right-zai{
						padding: 8rpx;	
						text-align: center;
						font-size: 16rpx;
						font-family: STHeitiSC;
						font-weight: 300;
						color: #FFFFFF;
						background: #00C6C2;
						border-radius: 4rpx;
					}
				}
			}
		}
	
</style>
